<template>
    <div class="msg">
        <a-menu id="msgMenu" v-model:selectedKeys="selectedKeys" mode="inline" class="menu">
            <a-menu-item v-for="msg in msgMenu" :key="msg.key" @click="push(msg.key)">
                <template #icon>
                    <send-outlined />
                </template>
                {{ msg.value }}
                <a-badge :count="msg.num" />
            </a-menu-item>
        </a-menu>
        <div class="router">
            <router-view></router-view>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { SendOutlined } from '@ant-design/icons-vue'
import { useRouter } from "vue-router";
import { get } from '@/common'

const router = useRouter(); //获取路由器

const push = (p) => {
    router.push({ path: msgMenu.value[p - 1].path });
}

const selectedKeys = ref([]);

const msgMenu = ref([
    {
        key: 1,
        value: "收到的赞",
        path: "/likeMsg",
        num: 0

    },
    {
        key: 2,
        value: "评论我的",
        path: "/commentMsg",
        num: 0
    },
    {
        key: 3,
        value: "回复我的",
        path: "/replyMsg",
        num: 0
    },
    {
        key: 4,
        value: "我的消息",
        path: "/chat",
        num: 0
    },
    {
        key: 5,
        value: "收藏",
        path: "/collectMsg",
        num: 0

    },
    {
        key: 6,
        value: "关注",
        path: "/followMsg",
        num: 0
    },
    {
        key: 7,
        value: "帖子审核",
        path: "/postCheckMsg",
        num: 0

    },
    {
        key: 8,
        value: "举报结果",
        path: "/reportMsg",
        num: 0
    },
])

const getMegNum = () => {
    get("/message/unread2").then((res) => {
        for (let i = 0; i < 8; i++) {
            msgMenu.value[i].num = res.data[i]
        }
        console.log(msgMenu.value)
    })
}
getMegNum()

</script>
<style scoped>
.msg {
    display: flex;
    flex-direction: row;
    padding-top: 10px;
    padding-bottom: 30px;
}

.menu {
    width: 200px;
    height: 600px;
    background-color: aliceblue
}

.router {
    margin-left: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    min-width: 800px;
    background-color: white;
}
</style>